<template>
	<view class="content" :style="{backgroundImage:'url('+text[this.id].img+')'}">
		<view class="go_back" @click="go_back" >
			<image src="../../../static/img/problem_people.png" mode=""></image>
			<text>返回</text>
		</view>
		<view class="duihua">
			<view class="text">
				<rich-text :nodes="text[this.id].con[ans]"></rich-text>
				
			</view>
			<view class="btn">
				<view class="last" v-show="ans!=0" @click="last">
					<image src="../../../static/img/icons_next .png" mode=""></image>
				</view>
				<view class="dati" v-show="ans==text[this.id].con.length-1" @click="dati">
					答题
				</view>
				<view class="next" v-show="ans!=text[this.id].con.length-1" @click="next">
					<image src="../../../static/img/icons_next .png" mode=""></image>
				</view>
			</view>
			
			
		</view>
		<view :hidden="userFeedbackHidden" class="popup_content" :animation="animationData">
			<view class="question_num">
				<!-- src="../../static/img/questionnum.png" -->
				<image src="../../../static/img/problem_people.png" mode=""></image>
				<text>{{datat[num].id}}/10</text>
			</view> 
				<view class="question">
					<text style="font-size: 20px;">{{datat[num].topic}}</text>
				</view>
				<view class="choice">
				
					<radio-group @change="changeRadio">
				
						<view class="choiceA " :class="{active:isactive}">
				
							<label class="radio">
								<radio value="A" :checked="'A'==checked" />
								<view class="timu">{{datat[num].choiceA}}</view>
							</label>
						</view>
				
						<view class="choiceB" :class="{active:isactivse}">
							<label class="radio">
								<radio value="B" :checked="'B'===checked" />
								<view class="timu">{{datat[num].choiceB}}</view>
							</label>
						</view>
						<view class="choiceC" :class="{active:isactivse}" v-show="num>6">
							<label class="radio">
								<radio value="C" :checked="'C'===checked" />
								<view class="timu">{{datat[num].choiceC}}</view>
							</label>
						</view>
						<view class="choiceD" :class="{active:isactivse}"  v-show="num==8">
							<label class="radio">
								<radio value="D" :checked="'D'===checked" />
								<view class="timu">{{datat[num].choiceD}}</view>
							</label>
						</view>
					</radio-group>
				</view>
				<view class="dati_next" @click="dati_next">
					<!-- src="../../static/img/next_bordrer.png" -->
					<image src="../../../static/img/next_proble.png" mode=""></image>
				</view>
		</view>
		<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationData:{},
				datat:[],
				num:0,
				isactive: false,
				isactivse: false,
				checked: "",
				text:[
					
						{con:["<h3>云散日朗，人意山光，俱有喜态，徐霞客来到了一处高山远景。</h3>",
					"<h3>这时，徐霞客看到前方一位身材微胖、披着道袍、拿着一个包治百病的中年人与一位年迈妇女谈话。</h3>",
					"<h3>中年人从衣着上，似乎是一个道士，但是他的举动与一般的道士完全不同。</h3>",
					"<h3>他拉着老人说：“我乃茅山道士，见你日元国弱又行弱地，我这里有一副药，只要你买去，包您药到病除。”</h3>",
					"<h3>徐霞客感觉不对，立马大喊着：“老奶奶，不要信啊”。</h3>",
					"<h3>道士一听，顿时剁了跺脚，转过身来，恶狠狠的瞪了他一眼，然后一溜烟就跑了。</h3>",
					"<h3>这越发让徐霞客相信眼前这个人就是想要讹诈老人钱财的冒牌货。</h3>"],
					img:"http://123.157.242.136:8089/wxc/youji/bk1.png"},
					{con:["<h3>徐霞客也是勇敢的，他出身优渥却立志远方。人人都曾立下誓愿，有些人遇到艰难险阻就放弃了，而他矢志不渝，知险而不退。</h3>",
					"<h3>但在其游历大好河山时，亦遭受过无数艰险。例如，三遇盗匪，甚至跳下湘江脱险，四次绝粮。</h3>",
					"<h3>一日，霞客来到黄山附近的客栈，准备住一晚为其爬黄山养精蓄锐。</h3>",
					"<h3>当来到客房时，发现床边的一本骗术秘籍，经过其详细翻看，心道：“这本书可是一个祸害”。</h3>",
					"<h3>突然，他听见隔壁嗡嗡的声音，好像是打算通过该秘籍，做坏事。</h3>",
					"<h3>他决定立马前去，以免产生难以预料的祸端。</h3>",
					"<h3>来到隔壁，他发现里面是懵懵懂懂的女小孩，便越发觉得此前来的决定是正确。</h3>",
					"<h3>他通过以往发生相似的示例，告诉小女孩对自身以及受害者的危害。</h3>"],
					img:"http://123.157.242.136:8089/wxc/youji/bk2.png"}
					
					
					
					
				
				],
				ans:0,
				userFeedbackHidden:true,
				id:0,
			}
			
		},

		onLoad: function(option) {
			var id = JSON.parse(option.id);
			console.log(id)
			this.id=id-1;
			let type = option.type;
			var that = this;
			// console.log(type);
			var data = require('../../../static/data/answer.json'); 
			that.datat = data["zhapian_answer"].filter(item => item.type ==id)[0]["content"];
			console.log(that.text)
		},
		methods: {

			go_back(){
				console.log("123")
				uni.navigateBack({
				})
			},
			last(){
				if(this.ans>0){
					this.ans=this.ans-1;
				}
				
			},
			next(){
				if(this.ans<this.text[this.id].con.length-1){
					this.ans=this.ans+1;
				}
				
			},
			dati(){
				this.userFeedbackHidden=false;
				this.num=0;

				
			},
			hideDiv(){
				this.userFeedbackHidden=true;
			},
			changeRadio(e) {
				this.radioValue = e.detail.value;
				this.checked = e.detail.value;
				console.log(this.radioValue)
				console.log(this.num)
				// console.log(this.datat[this.num].result)
			},
			dati_next(){
				if (this.radioValue == this.datat[this.num].result) {
					// console.log("正确")
					uni.showToast({
						title: "恭喜您答对了",
						duration:500
					})
					
				}
				if(this.num!=10){
					this.num=this.num+1;	
				}
				
				if(this.num==10){
					uni.showToast({
						title: "恭喜完成答题"
					});
					                 
					    setTimeout(function () {
					        uni.switchTab({
					        	url:"/pages/youji/youji"
					        })
					    }, 1000);
					
				}
					this.checked=''	
				}
			
		}
	}
</script>

<style>
	page{
			/* background-color: blanchedalmond; */
			/* background-image: {url("http://123.157.242.136:8089/wxc/youji/bk"+{this.id}+".png")}; */
			background-size: 100% 100%;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		
	}
	.go_back{
		/* width: 200rpx ;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 30rpx;
		border:red solid 1px; */
		width: 200rpx;
		height: 80rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		background-color: #C0D3E1;
		border-radius: 40rpx;
		text-align: right;
		line-height: 80rpx;
		font-size: 48rpx;
		font-weight: bold;
		
	}
	.go_back image {
		width: 50rpx;
		height: 80rpx;
		float: left !important;
	
	}
	
	.duihua{
		position: absolute;
		bottom: 0;
		/* border: red solid 1px; */
		width: 750rpx;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		background-image: url("/static/img/duihua.png");
		background-size: 100% 100%;

	}
	
	.text{
		width: 600rpx;
		height: 200rpx;
		margin:   auto ;
		box-sizing: border-box;
		margin-top: 60rpx;
		/* margin-top: 60rpx; */
		/* border:  red solid 1px; */
		padding: 20rpx;
		
	}
	.text p{
		text-indent: 2rem;
	}
	.btn{
		/* width: 450rpx; */
		height: 100rpx;
		/* border: red solid 1px; */
		align-content:flex-end;
		align-self:flex-end;
		display: flex;
		flex-direction: row;
		margin: 20rpx;
		padding-right: 30rpx;


	}
	.next ,.last{
		/* border: red solid 1px; */
		height: 50rpx;
		width: 50rpx;
		border-radius: 20rpx;

	}
	.last{
		margin-right: 10rpx;
		 transform: rotateY(180deg);
	}
	.next{margin-left: 10rpx;}
	.dati{
		/* border: red solid 1px; */
		width: 100rpx;
		height: 50rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 48rpx;
		/* background-color:rgba(117,170,218,0.7) ; */
		background-color: #C0D3E1;
	}
	.question_num {
		/* border:  solid 1px red; */
		width: 200rpx;
		height: 80rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		background-color: #C0D3E1;
		border-radius: 40rpx;
		text-align: right;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: bold;
	
	
	}
	
	.question_num image {
		width: 50rpx;
		height: 80rpx;
		float: left !important;
	
	}
	
	
	.question {
		/* border:  solid 1px red; */
		/* width: 750rpx;	 */
		line-height: 50rpx;
		font-weight: 550;
		margin: 40rpx auto;
	}
	.choice {
		/* border: solid 1px red; */
		/* width: 350px; */
		/* height: 200px; */
		margin: 40rpx auto;
	}
	
	
	
	.choiceA,
	.choiceB,
	.choiceC,
	.choiceD {
		/* height: 50rpx; */
		border: solid 3px #ACC3D4;
		border-radius: 20rpx;
		background-color: #cde1ef;
		margin-bottom: 20rpx;
		/* background-color: aqua; */
	}
	
	
	.radio radio {
		/* border:black solid 1px; */
		float: left;
	}
	
	.timu{
		line-height: 50rpx;
	}
	.dati_next{
		/* border: red solid 1px; */
		width: 300rpx;
		height: 100rpx;
		margin: auto;
	}
	.dati_next image{
		width: 100%;
		height: 100%;
	}
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,0.5);
		z-index: 99;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}
	
	.popup_content {
		height: 80vh;
		width: 600rpx;
		overflow-x: hidden;
		background-color: aliceblue;
		border: #ACC3D4 solid 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		position: fixed;
		top: 10%;
		left: 10%;
		z-index: 100;
		/* overflow: auto; */
	}
</style>
